<!--
*- coding = utf-8 -*-
#@Time : 2023/6/20 16:39
#@Author : 管茂良
#@File : commonList.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
  <view class="list-style u-f-ajs" v-bind="attrs">
    <view class="u-f" style="min-width: 140rpx;margin-right: 20rpx">
      <template v-if="leftSlot">
        <slot name="leftSlot" />
      </template>
      <view class="u-f u-f-ac u-f-ajc margin-right-5" v-if="props.icon">
        <SvgIcon :size="'15'" :style="'color'+props.leftIconColor" :iconClass="props.icon" />
      </view>
      <view class="title u-f u-f-ac u-f-ajc">{{props.title}}</view>
    </view>
    <template v-if="!content">
      <view class="u-f u-f-ajs u-f-ac" :style="content?'width:calc(100% - 160rpx)':''">
        <template v-if="props.isShowRightIcon">
          <template v-if="rightSlot">
              <slot name="rightSlot" />
          </template>
          <template v-else>
            <view style="width:30px" class="u-f u-f-ac u-f-ajs">
              <view></view>
              <view class="u-f u-f-ac u-f-ajc">
                <SvgIcon :size="'15'" :style="'color'+props.rightIconColor" :iconClass="'right'" />
              </view>
            </view>
          </template>
        </template>
      </view>
    </template>
    <template v-else>
      <view class="u-f u-f-ajs u-f-ac" :style="content && props.isShowRightIcon?'width:calc(100% - 160rpx)':'width:calc(100% - 110rpx)'">
        <template v-if="content">
          <view style="width:calc(100% - 60rpx)">
            <slot name="content" />
          </view>
        </template>
        <template v-if="props.isShowRightIcon">
          <template v-if="rightSlot">
              <slot name="rightSlot" />
          </template>
          <template v-else>
            <view style="width:30px" class="u-f u-f-ac u-f-ajs">
              <view></view>
              <view class="u-f u-f-ac u-f-ajc">
                <SvgIcon :size="'15'" :style="'color'+props.rightIconColor" :iconClass="'right'" />
              </view>
            </view>
          </template>
        </template>
      </view>
    </template>

  </view>
  <view class="line-style" v-if="props.isShowLineStyle" :style="lineStyle"></view>
</template>

<script setup lang="ts">
import {useAttrs, useSlots} from "vue";

let attrs = useAttrs()

let leftSlot = !!useSlots().leftSlot;
let rightSlot = !!useSlots().rightSlot;
let content = !!useSlots().content;

interface propsInterface{
  icon?:string//标题icon
  title:string//标题
  isShowLineStyle?:boolean//是否显示下划线
  lineStyle?:string//下划线样式修改
  isShowRightIcon?:boolean//右图标
  leftIconColor?:string//是否显示下划线
  rightIconColor?:string//是否显示下划线
}
let props = withDefaults(defineProps<propsInterface>(),{
  icon:"",
  title:"",
  isShowLineStyle:true,
  lineStyle:"",
  isShowRightIcon:true,
  leftIconColor:"",
  rightIconColor:"",
})
</script>

<style scoped lang="less">
.list-style {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
.line-style{
  background:#f4f6f9;
  width: 100%;
  height:1px;
  margin:0px auto;
}
</style>
